﻿<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>系统登录 - 超市订单管理系统</title>
        <link type="text/css" rel="stylesheet" href="css/style.css"/>
        <!--element ui样式文件-->
        <link href="element-ui/index.css" rel="stylesheet">
        <style>
            .loginCont {
                background: url("images/formBg.png") 0 0 no-repeat;
                padding-top: 68px;
            }
            .loginCont .el-input, .el-button {
                width: 245px;
            }
        </style>

    </head>
    <body class="login_bg">
        <section class="loginBox">
            <header class="loginHeader">
                <h1>超市订单管理系统</h1>
            </header>
            <section class="loginCont" id="app">
                <el-form ref="loginForm" :rules="rules" :model="user" label-width="80px">
                    <el-form-item prop="userCode" label="账号">
                        <el-input v-model="user.userCode" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="userPassword" label="密码">
                        <el-input type="password" v-model="user.userPassword" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </section>
        </section>
        <script src="js/vue.js"></script>
        <script src="js/axios.min.js"></script>
        <script src="element-ui/index.js"></script>
        <script>
            var vue = new Vue({
                el:"#app",
                data:{
                    user:{},//表单提交的数据
                    rules:{
                        userCode:[{ required: true, message: '请输入账号', trigger: 'blur' }],
                        userPassword:[{ required: true, message: '请输入密码', trigger: 'blur' }]
                    }
                },
                methods:{
                    login(){
                        //判断表单验证是否通过
                        this.$refs["loginForm"].validate(valid=>{
                            if (valid){
                                //表单验证通过
                                axios.post("userLogin",this.user)
                                    .then(response=>{
                                        if (response.data.flag){
                                            localStorage.username = response.data.data.userName;
                                            localStorage.id = response.data.data.id;
                                            location.href = "view/index.html";
                                        }else {
                                            this.$message(response.data.msg);
                                        }
                                    })
                                    .catch(error=>{
                                        //请求错误
                                        this.$message(error+"");

                                    });
                            }
                        })

                    }
                }
            });
        </script>
    </body>
</html>
